import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { breadcrumbDefaultProps } from './defaultProps';
import type { BreadcrumbOptions } from './type';
import BreadcrumbSection from './BreadcrumbSection';
import BreadcrumbDivider from './BreadcrumbDivider';

export interface BreadcrumbProps extends BreadcrumbOptions, HTMLAttributes<HTMLDivElement> {}

interface BreadcrumbInterface extends FC<BreadcrumbProps> {
  Section: typeof BreadcrumbSection;
  Divider: typeof BreadcrumbDivider;
}

const Breadcrumb: BreadcrumbInterface = (props) => {
  const { className, inverted, size, children, forwardedRef, ...breadcrumbProps } = props;

  return createElement(
    'div',
    { ref: forwardedRef, className: classNames('ui', { inverted }, size, 'breadcrumb', className), ...breadcrumbProps },
    children,
  );
};

Breadcrumb.displayName = 'Breadcrumb';
Breadcrumb.defaultProps = breadcrumbDefaultProps;

Breadcrumb.Section = BreadcrumbSection;
Breadcrumb.Divider = BreadcrumbDivider;

export default Breadcrumb;
